<!-- <template>
  <div v-loading="loading" :class="props.mode == 'select' && 'p-6'">
    <div class="flex items-center gap-1">
      <el-select
        v-model="searchData.language"
        placeholder="请选择语言"
        style="width: 80px"
        @change="GetData()"
      >
        <el-option
          v-for="item in languageOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        @change="GetData()"
        class="max-w-72"
        placeholder="请输入文件的名字  (按回车进行搜索)"
        v-model="searchData.filename"
      ></el-input>
      <el-upload
        :action="`${VITE_URL}?lng=${searchData.language}&type=${searchData.type}`"
        :headers="{
          authorization: userStore.user.token
        }"
        :show-file-list="false"
        multiple
        @progress="handleUploadProgress"
        @error="handleErrorProgress"
        @success="handleUploadSuccess"
      >
        <template #trigger>
          <el-button type="primary">上传文件</el-button>
        </template>
      </el-upload>
      <el-popconfirm @confirm="handleDeleteFileClick" title="确认删除选中的文件吗?">
        <template #reference>
          <el-button type="danger">删除选中</el-button>
        </template>
      </el-popconfirm>
      <el-button @click="activeDataSource = []" type="primary">取消选中</el-button>
    </div>
    <el-tabs @tab-change="GetData()" v-model="searchData.type">
      <el-tab-pane class="max-h-[700px] overflow-auto" label="商品展示图片" name="img">
        <div class="lg:columns-6 md:columns-3">
          <template v-for="item of store.fileData" :key="item.ID">
            <div
              @click="handleActiveDataSourceClick(item)"
              style="border-color: white"
              :class="{ 'border-blue-500': activeDataSource?.find((u: any) => u.url == item.url) }"
              class="p-2 border-2 overflow-hidden bg-white rounded-lg mb-1"
            >
              <img
                class="cursor-pointer text-center mx-auto"
                :src="item.url"
                :alt="item.filename"
              />
              <div class="text-ellipsis overflow-hidden">{{ item.filename }}</div>
            </div>
          </template>
        </div>
      </el-tab-pane>
      <el-tab-pane class="max-h-[700px] overflow-auto" label="商品文件/文档" name="file">
        <div class="flex flex-wrap">
          <template v-for="item of store.fileData" :key="item.ID">
            <div class="p-1 w-1/5">
              <div
                @click="handleActiveDataSourceClick(item)"
                :class="{
                  'border-blue-500': activeDataSource.find((u: any) => u.filename == item.filename)
                }"
                class="border overflow-hidden p-2 bg-white w-full h-full rounded-lg"
              >
                <img
                  class="cursor-pointer w-auto h-52 mx-auto text-center"
                  :src="
                    (item.url as string).includes('.pdf')
                      ? 'http://i18nport.dongsongkeji.com.cn/upload/84edf702-cc2f-502d-bcc0-2b22756844ec.png'
                      : 'http://i18nport.dongsongkeji.com.cn/upload/3346c4c3-c2a3-53ad-958a-ce029b95b21e.png'
                  "
                  :alt="item.filename"
                  :title="item.filename"
                />
                <div class="pb-2 text-center text-overflow">
                  <span>{{ item.filename }}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </el-tab-pane>
      <el-tab-pane class="max-h-[700px] overflow-auto" label="说明书" name="instruction">
        instruction
      </el-tab-pane>
      <el-tab-pane class="max-h-[700px] overflow-auto" label="图纸" name="drawing">
        drawing
      </el-tab-pane>
      <el-tab-pane class="max-h-[700px] overflow-auto" label="软件" name="app">
        app
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { languageOptions } from '@/utils'
import {  useProductFileStore, useUserStore } from '@/stores'
import { DeleteFileService, FindFileService } from '@/service'
const props = withDefaults(
  defineProps<{
    mode?: 'default' | 'select'
    showMode?: 'image' | 'icon' | 'file'
    max?: number
    name?: string
  }>(),
  {
    mode: 'default',
    showMode: 'image',
    max: 99,
    name: 'img'
  }
)
const loading = ref(false)
const VITE_URL = ref('')
const urls = defineModel<string>({ default: null })
const searchData = reactive({
  language: 'zh',
  filename: '',
  type: props.name
})
const dialogVisible = ref(false)
const activeDataSource = ref<any[]>([])
const store = useProductFileStore()
// 上传
function handleUploadSuccess(response: any) {
  ElMessage({
    type: response.code == 0 ? 'success' : 'error',
    message: response.msg
  })
  loading.value = false
  if (response.code == 0) {
    GetData()
  }
}
function handleUploadProgress() {
  loading.value = true
}
function handleErrorProgress() {
  loading.value = false
}
// 处理对话框文件选中确定
function HandleSelectFileClick() {
  if (props.showMode !== 'file') {
    const url = activeDataSource.value.reduce((previousValue, currentValue) => {
      if (previousValue == '') {
        return currentValue.url
      }
      return previousValue + ',' + currentValue.url
    }, '')
    dialogVisible.value = false
    urls.value = url
    return urls
  } else {
    const url = activeDataSource.value.reduce((previousValue, currentValue) => {
      if (previousValue.length === 0) {
        return [{ filename: currentValue.filename, url: currentValue.url }]
      }
      return [...previousValue, { filename: currentValue.filename, url: currentValue.url }]
    }, [])
    dialogVisible.value = false
    console.log(JSON.parse(JSON.stringify(url)))
    urls.value = JSON.stringify(url)
    return urls
  }
}
// 处理选中高亮
function handleActiveDataSourceClick(item: any) {
  if (activeDataSource.value?.length >= props.max) {
    activeDataSource.value[activeDataSource.value?.length - 1] = item
    return
  }
  let index = 0
  if (props.showMode === 'file') {
    index = activeDataSource.value.findIndex((u: any) => u.filename == item.filename)
  } else {
    index = activeDataSource.value.findIndex((u: any) => u.url == item.url)
  }
  // 进入
  if (index == -1) {
    activeDataSource.value.push(item)
  } else {
    activeDataSource.value.splice(index, 1)
  }
}
// 处理文件删除
function handleDeleteFileClick() {
  DeleteFileService(activeDataSource.value, searchData.type).then(() => {
    GetData()
  })
}
const userStore = useUserStore()
async function GetData() {
  // 1. 重置数组
  store.fileData = []
  // 2. 获取展示数据
  const res = await FindFileService(searchData.language, searchData.type)
  // 3. 设置展示数据
  store.fileData = res.data
  // 4. 设置当前活跃的数据
  if (activeDataSource.value.length == 0 && urls.value) {
    const arr = urls.value
      .split(',')
      .filter((item) => item != '')
      .map((item) => {
        console.log(">>", item);
        
        if (props.showMode == 'file') return { filename: item }
        return { url: item }
      })
    activeDataSource.value = arr.length ? arr : []
  }
}

defineExpose({
  GetData,
  HandleSelectFileClick
})

onMounted(() => {
  VITE_URL.value = import.meta.env.VITE_UPLOAD_FILE_URL
})
</script> -->
